<template>
    <!-- 自定义汇总 -->
    <div class="summarys-item-page">
        <el-checkbox-group
            v-model="check.list"
            :min="1"
            @change="handleChecked"
        >
            <el-checkbox
                v-for="v in check.data"
                :label="v.label"
                :key="v.value"
            />
        </el-checkbox-group>
        <Table
            ref="Table"
            :api="$Api.storage.gcount.custom"
            :sort="false"
            :params="params"
            height="70vh"
        >
            <el-table-column
                label="品名"
                prop="goodsName"
                width="200"
                v-if="isCheck('品名')"
            />
            <el-table-column
                label="品牌"
                prop="brandName"
                width="200"
                v-if="isCheck('品牌')"
            />
            <el-table-column
                label="等级"
                prop="level"
                width="200"
                v-if="isCheck('等级')"
            />
            <el-table-column
                label="仓库"
                prop="warehouse"
                width="200"
                v-if="isCheck('仓库')"
            />
            <el-table-column
                label="厚度"
                prop="ply"
                width="88"
                v-if="isCheck('厚度')"
            />
            <el-table-column
                label="宽度"
                prop="width"
                width="88"
                v-if="isCheck('宽度')"
            />
            <el-table-column
                label="长度"
                prop="length"
                v-if="isCheck('长度')"
            />
            <el-table-column
                label="片数"
                prop="sliceCount"
                v-if="isCheck('片数')"
            />
            <el-table-column
                label="产地"
                prop="originPlace"
                v-if="isCheck('产地')"
            />
            <el-table-column
                label="箱号"
                prop="caseNum"
                v-if="isCheck('箱号')"
            />
            <el-table-column
                label="提单号"
                prop="ladingNum"
                v-if="isCheck('提单号')"
            />
            <el-table-column
                label="合同号"
                prop="pactNum"
                v-if="isCheck('合同号')"
            />
            <el-table-column
                label="货物状态"
                prop="goodsStatus"
                v-if="isCheck('货物状态')"
            />
            <el-table-column label="件数" prop="pieceCount" />
            <el-table-column label="方数" prop="inCount" />
            <el-table-column label="可用" prop="usableInCount" />
        </Table>
    </div>
</template>

<script>
export default {
    data: () => {
        return {
            check: {
                // 可选菜单
                data: [
                    { label: "品名", value: "goodsName" },
                    { label: "品牌", value: "brandName" },
                    { label: "等级", value: "level" },
                    { label: "仓库", value: "warehouse" },
                    { label: "厚度", value: "ply" },
                    { label: "宽度", value: "width" },
                    { label: "长度", value: "length" },
                    { label: "片数", value: "sliceCount" },
                    { label: "产地", value: "originPlace" },
                    { label: "箱号", value: "caseNum" },
                    { label: "提单号", value: "ladingNum" },
                    { label: "合同号", value: "pactNum" },
                    { label: "货物状态", value: "goodsStatus" },
                ],
                // 已选
                list: ["品名"],
            },
            params: {
                "params[goodsName]": 1,
            },
        };
    },
    computed: {
        isCheck() {
            return (v) => {
                let { list } = this.check;
                return list.includes(v);
            };
        },
    },
    methods: {
        handleChecked(checked) {
            let params = {};
            let { data } = this.check;
            checked.forEach((item) => {
                let k = data.find((v) => {
                    return v.label === item;
                }).value;
                params[`params[${k}]`] = 1;
            });

            this.params = params;
            this.$nextTick(() => {
                this.$refs.Table.getData();
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.summarys-item-page {
    padding: 20px;
    .el-checkbox-group {
        .el-checkbox {
            margin: 0 30px 20px 0;
        }
    }
}
</style>














